
$callout-colors: (
    "blue"      "82, 139, 212",     // rgb(82, 139, 212)
    "green"     "86, 179, 117",     // rgb(86, 179, 117)
    "orange"    "230, 129, 63",     // rgb(230, 129, 63)
    "red"       "193, 67, 67",      // rgb(193, 67, 67)
    "purple"    "153, 97, 218",     // rgb(153, 97, 218)
    "gray"      "166, 189, 197",    // rgb(166, 189, 197)
    "yellow"    "208, 181, 48",     // rgb(208, 181, 48)
    "pink"      "227, 107, 167",    // rgb(227, 107, 167)
    "brown"     "161, 106, 73",     // rgb(161, 106, 73)
    "black"     "0, 0, 0",          // rgb(0, 0, 0)
    "white"     "256, 256, 256",    // rgb(256, 256, 256)
    "plain"     "transparent"
);

/*--Callout Coloring--*/
.callout.callout.callout {
    --callout-color-opacity: 20%;

    @each $name, $color in $callout-colors {
        --callout-#{$name}: #{$color};
    
        //Title Text Colors
        &:is(
            [data-callout-metadata~="color-#{$name}"], 
            [data-callout-metadata~="c-#{$name}"],
            [data-callout-metadata~="background-color-#{$name}"], 
            [data-callout-metadata~="bg-c-#{$name}"] 
        ) > .callout-title { --callout-color: var(--callout-#{$name}); }

        //Background Colors
        &:is(
            [data-callout-metadata~="background-#{$name}"], 
            [data-callout-metadata~="bg-#{$name}"],
            [data-callout-metadata~="background-color-#{$name}"], 
            [data-callout-metadata~="bg-c-#{$name}"]
        ) { 
            --callout-background: rgba(var(--callout-#{$name}), var(--callout-color-opacity)); 
            background-color: var(--callout-background); 
        }
        
        //Background & Text
        &:is(
            [data-callout-metadata~="background-color-#{$name}"], 
            [data-callout-metadata~="bg-c-#{$name}"]
        ) { --callout-color: var(--callout-#{$name}); }
    } 
    // &:is(
    //     [data-callout-metadata~="color-"], [data-callout-metadata~="c-"]
    // ) { --callout-color: var(--callout); }
}

